<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Physics documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - physics</h1>
      <p>
        Handles the physics simulation, moving the nodes and edges to show them
        clearly.
      </p>
      <h3>Options</h3>
      <p>
        The options for the physics have to be contained in an object titled
        'physics'.
      </p>
      <p>
        Click on the full options or shorthand options to show how these options
        are supposed to be used.
      </p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">options hidden</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">full options</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="shortOptions"
        >
          <a href="#">shorthand options</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
  physics:{
    enabled: true,
    barnesHut: {
      theta: 0.5,
      gravitationalConstant: -2000,
      centralGravity: 0.3,
      springLength: 95,
      springConstant: 0.04,
      damping: 0.09,
      avoidOverlap: 0
    },
    forceAtlas2Based: {
      theta: 0.5,
      gravitationalConstant: -50,
      centralGravity: 0.01,
      springConstant: 0.08,
      springLength: 100,
      damping: 0.4,
      avoidOverlap: 0
    },
    repulsion: {
      centralGravity: 0.2,
      springLength: 200,
      springConstant: 0.05,
      nodeDistance: 100,
      damping: 0.09
    },
    hierarchicalRepulsion: {
      centralGravity: 0.0,
      springLength: 100,
      springConstant: 0.01,
      nodeDistance: 120,
      damping: 0.09,
      avoidOverlap: 0
    },
    maxVelocity: 50,
    minVelocity: 0.1,
    solver: 'barnesHut',
    stabilization: {
      enabled: true,
      iterations: 1000,
      updateInterval: 100,
      onlyDynamicEdges: false,
      fit: true
    },
    timestep: 0.5,
    adaptiveTimestep: true,
    wind: { x: 0, y: 0 }
  }
}

network.setOptions(options);
</pre
      >

      <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
  physics:{
    stabilization: false
  }
}
network.setOptions(options);
</pre
      >
      <p>All of the individual options are explained here:</p>
      <table class="options" id="optionTable">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>enabled</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Toggle the physics system on or off. This property is optional. If
            you define any of the options below and enabled is undefined, this
            will be set to true.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','barnesHut', this);"
        >
          <td>
            <span parent="barnesHut" class="right-caret"></span> barnesHut
          </td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            BarnesHut is a quadtree based gravity model. This is the fastest,
            default and recommended solver for non-hierarchical layouts.
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.theta</td>
          <td>Number</td>
          <td><code>0.5</code></td>
          <td>
            This parameter determines the boundary between consolidated long
            range forces and individual short range forces. To oversimplify
            higher values are faster but generate more errors, lower values are
            slower but with less errors.
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.gravitationalConstant</td>
          <td>Number</td>
          <td><code>-2000</code></td>
          <td>
            Gravity attracts. We like repulsion. So the value is negative. If
            you want the repulsion to be stronger, decrease the value (so
            -10000, -50000).
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.centralGravity</td>
          <td>Number</td>
          <td><code>0.3</code></td>
          <td>
            There is a central gravity attractor to pull the entire network back
            to the center.
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.springLength</td>
          <td>Number</td>
          <td><code>95</code></td>
          <td>
            The edges are modelled as springs. This springLength here is the
            rest length of the spring.
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.springConstant</td>
          <td>Number</td>
          <td><code>0.04</code></td>
          <td>
            This is how 'sturdy' the springs are. Higher values mean stronger
            springs.
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.damping</td>
          <td>Number</td>
          <td><code>0.09</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. The damping factor is how
            much of the velocity from the previous physics simulation iteration
            carries over to the next iteration.
          </td>
        </tr>
        <tr parent="barnesHut" class="hidden">
          <td class="indent">barnesHut.avoidOverlap</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size
            of the node is taken into account. The distance will be calculated
            from the radius of the encompassing circle of the node for both the
            gravity model. Value 1 is maximum overlap avoidance.
          </td>
        </tr>

        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','forceAtlas2Based', this);"
        >
          <td>
            <span parent="forceAtlas2Based" class="right-caret"></span>
            forceAtlas2Based
          </td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            Force Atlas 2 has been developed by
            <a
              href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679"
              target="_blank"
              >Jacomi <i>et al</i> (2014)</a
            >
            for use with Gephi. The forceAtlas2Based solver makes use of some of
            the equations provided by them and makes use of the barnesHut
            implementation in vis. The main differences are the central gravity
            model, which is here distance independent, and the repulsion being
            linear instead of quadratic. Finally, all node masses have a
            multiplier based on the amount of connected edges plus one.
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.theta</td>
          <td>Number</td>
          <td><code>0.5</code></td>
          <td>
            This parameter determines the boundary between consolidated long
            range forces and individual short range forces. To oversimplify
            higher values are faster but generate more errors, lower values are
            slower but with less errors.
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.gravitationalConstant</td>
          <td>Number</td>
          <td><code>-50</code></td>
          <td>
            This is similar to the barnesHut method except that the falloff is
            linear instead of quadratic. The connectivity is also taken into
            account as a factor of the mass. If you want the repulsion to be
            stronger, decrease the value (so -1000, -2000).
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.centralGravity</td>
          <td>Number</td>
          <td><code>0.01</code></td>
          <td>
            There is a central gravity attractor to pull the entire network back
            to the center. This is not dependent on distance.
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.springLength</td>
          <td>Number</td>
          <td><code>100</code></td>
          <td>
            The edges are modelled as springs. This springLength here is the
            rest length of the spring.
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.springConstant</td>
          <td>Number</td>
          <td><code>0.08</code></td>
          <td>
            This is how 'sturdy' the springs are. Higher values mean stronger
            springs.
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.damping</td>
          <td>Number</td>
          <td><code>0.4</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. The damping factor is how
            much of the velocity from the previous physics simulation iteration
            carries over to the next iteration.
          </td>
        </tr>
        <tr parent="forceAtlas2Based" class="hidden">
          <td class="indent">forceAtlas2Based.avoidOverlap</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size
            of the node is taken into account. The distance will be calculated
            from the radius of the encompassing circle of the node for both the
            gravity model. Value 1 is maximum overlap avoidance.
          </td>
        </tr>

        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','repulsion', this);"
        >
          <td>
            <span parent="repulsion" class="right-caret"></span> repulsion
          </td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            The repulsion model assumes nodes have a simplified repulsion field
            around them. It's force linearly decreases from 1 (at
            0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).
          </td>
        </tr>
        <tr parent="repulsion" class="hidden">
          <td class="indent">repulsion.nodeDistance</td>
          <td>Number</td>
          <td><code>100</code></td>
          <td>This is the range of influence for the repulsion.</td>
        </tr>
        <tr parent="repulsion" class="hidden">
          <td class="indent">repulsion.centralGravity</td>
          <td>Number</td>
          <td><code>0.2</code></td>
          <td>
            There is a central gravity attractor to pull the entire network back
            to the center.
          </td>
        </tr>
        <tr parent="repulsion" class="hidden">
          <td class="indent">repulsion.springLength</td>
          <td>Number</td>
          <td><code>200</code></td>
          <td>
            The edges are modelled as springs. This springLength here is the
            rest length of the spring.
          </td>
        </tr>
        <tr parent="repulsion" class="hidden">
          <td class="indent">repulsion.springConstant</td>
          <td>Number</td>
          <td><code>0.05</code></td>
          <td>
            This is how 'sturdy' the springs are. Higher values mean stronger
            springs.
          </td>
        </tr>
        <tr parent="repulsion" class="hidden">
          <td class="indent">repulsion.damping</td>
          <td>Number</td>
          <td><code>0.09</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. The damping factor is how
            much of the velocity from the previous physics simulation iteration
            carries over to the next iteration.
          </td>
        </tr>

        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','hierarchicalRepulsion', this);"
        >
          <td>
            <span parent="hierarchicalRepulsion" class="right-caret"></span>
            hierarchicalRepulsion
          </td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            This model is based on the repulsion solver but the levels are taken
            into account and the forces are normalized.
          </td>
        </tr>
        <tr parent="hierarchicalRepulsion" class="hidden">
          <td class="indent">hierarchicalRepulsion.nodeDistance</td>
          <td>Number</td>
          <td><code>120</code></td>
          <td>This is the range of influence for the repulsion.</td>
        </tr>
        <tr parent="hierarchicalRepulsion" class="hidden">
          <td class="indent">hierarchicalRepulsion.centralGravity</td>
          <td>Number</td>
          <td><code>0.0'</code></td>
          <td>
            There is a central gravity attractor to pull the entire network back
            to the center.
          </td>
        </tr>
        <tr parent="hierarchicalRepulsion" class="hidden">
          <td class="indent">hierarchicalRepulsion.springLength</td>
          <td>Number</td>
          <td><code>100</code></td>
          <td>
            The edges are modelled as springs. This springLength here is the
            rest length of the spring.
          </td>
        </tr>
        <tr parent="hierarchicalRepulsion" class="hidden">
          <td class="indent">hierarchicalRepulsion.springConstant</td>
          <td>Number</td>
          <td><code>0.01</code></td>
          <td>
            This is how 'sturdy' the springs are. Higher values mean stronger
            springs.
          </td>
        </tr>
        <tr parent="hierarchicalRepulsion" class="hidden">
          <td class="indent">hierarchicalRepulsion.damping</td>
          <td>Number</td>
          <td><code>0.09</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. The damping factor is how
            much of the velocity from the previous physics simulation iteration
            carries over to the next iteration.
          </td>
        </tr>
        <tr parent="hierarchicalRepulsion" class="hidden">
          <td class="indent">hierarchicalRepulsion.avoidOverlap</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size
            of the node is taken into account. The distance will be calculated
            from the radius of the encompassing circle of the node for both the
            gravity model. Value 1 is maximum overlap avoidance.
          </td>
        </tr>

        <tr>
          <td>maxVelocity</td>
          <td>Number</td>
          <td><code>50</code></td>
          <td>
            The physics module limits the maximum velocity of the nodes to
            increase the time to stabilization. This is the maximum value.
          </td>
        </tr>
        <tr>
          <td>minVelocity</td>
          <td>Number</td>
          <td><code>0.1</code></td>
          <td>
            Once the minimum velocity is reached for all nodes, we assume the
            network has been stabilized and the simulation stops.
          </td>
        </tr>
        <tr>
          <td>solver</td>
          <td>String</td>
          <td><code>'barnesHut'</code></td>
          <td>
            You can select your own solver. Possible options:
            <code
              >'barnesHut', 'repulsion', 'hierarchicalRepulsion',
              'forceAtlas2Based'</code
            >. When setting the hierarchical layout, the hierarchical repulsion
            solver is automatically selected, regardless of what you fill in
            here.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','stabilization', this);"
        >
          <td>
            <span parent="stabilization" class="right-caret"></span>
            stabilization
          </td>
          <td>Object | Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, the network is stabilized on load using default settings.
            If false, stabilization is disabled. To further customize this, you
            can supply an object.
          </td>
        </tr>
        <tr parent="stabilization" class="hidden">
          <td class="indent">stabilization.enabled</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Toggle the stabilization. This is an optional property. If
            undefined, it is automatically set to true when any of the
            properties of this object are defined.
          </td>
        </tr>
        <tr parent="stabilization" class="hidden">
          <td class="indent">stabilization.iterations</td>
          <td>Number</td>
          <td><code>1000</code></td>
          <td>
            The physics module tries to stabilize the network on load up til a
            maximum number of iterations defined here. If the network stabilized
            with less, you are finished before the maximum number.
          </td>
        </tr>
        <tr parent="stabilization" class="hidden">
          <td class="indent">stabilization.updateInterval</td>
          <td>Number</td>
          <td><code>50</code></td>
          <td>
            When stabilizing, the DOM can freeze. You can chop the stabilization
            up into pieces to show a loading bar for instance. The interval
            determines after how many iterations the
            <code>stabilizationProgress</code> event is triggered.
          </td>
        </tr>
        <tr parent="stabilization" class="hidden">
          <td class="indent">stabilization.onlyDynamicEdges</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            If you have predefined the position of all nodes and only want to
            stabilize the dynamic smooth edges, set this to true. It freezes all
            nodes except the invisible dynamic smooth curve support nodes. If
            you want the visible nodes to move and stabilize, do not use this.
          </td>
        </tr>
        <tr parent="stabilization" class="hidden">
          <td class="indent">stabilization.fit</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Toggle whether or not you want the view to zoom to fit all nodes
            when the stabilization is finished.
          </td>
        </tr>
        <tr>
          <td>timestep</td>
          <td>Number</td>
          <td><code>0.5</code></td>
          <td>
            The physics simulation is discrete. This means we take a step in
            time, calculate the forces, move the nodes and take another step. If
            you increase this number the steps will be too large and the network
            can get unstable. If you see a lot of jittery movement in the
            network, you may want to reduce this value a little.
          </td>
        </tr>
        <tr>
          <td>adaptiveTimestep</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            If this is enabled, the timestep will intelligently be adapted
            <b
              >(only during the stabilization stage if stabilization is
              enabled!)</b
            >
            to greatly decrease stabilization times. The timestep configured
            above is taken as the minimum timestep.
            <a href="layout.html#layout" target="_blank"
              >This can be further improved by using the improvedLayout
              algorithm</a
            >.
          </td>
        </tr>

        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','wind', this);"
        >
          <td><span parent="wind" class="right-caret"></span> wind</td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            A force that pushes all non-fixed nodes in the given direction.<br />Requires
            all nodes are connected to nodes which are `fixed`, otherwise
            non-attached nodes will keep moving indefinitely.
          </td>
        </tr>
        <tr parent="wind" class="hidden">
          <td class="indent">wind.x</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            The amount of force to be applied pushing non-fixed nodes to the
            right (positive value) or to the left (negative value).
          </td>
        </tr>
        <tr parent="wind" class="hidden">
          <td class="indent">wind.y</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            The amount of force to be applied pushing non-fixed nodes downwards
            (positive value) or upwards (negative value).
          </td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/physics.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/physics.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
